<template>
  <div>
    <!-- banner -->
    <div class="home-banner" :style="cover">
      <div class="blog-wrapper">
        <v-card class="animated zoomIn blog-card mt-5" style="float: right;width: 200px">
          <div class="author-wrapper">
            <div style="font-size: 1.375rem;margin-top:0.625rem">
              数字挂图
            </div>
            <div style="font-size: 0.875rem;">
              网站简介
            </div>
          </div>
          <a class="collection-btn" @click="tip = true">
            <v-icon color="#fff" size="18" class="mr-1">mdi-bookmark</v-icon>
            加入书签
          </a>
        </v-card>
      </div>
      <div class="banner-container">
        <h1 class="blog-title animated zoomIn">
          数字挂图
        </h1>
        <!-- 一言 -->
        <div class="blog-intro">
          {{ obj.output }} <span class="typed-cursor">|</span>
        </div>
      </div>
      <!-- 向下滚动 -->
      <div class="scroll-down" @click="scrollDown">
        <v-icon color="#fff" class="scroll-down-effects">
          mdi-chevron-down
        </v-icon>
      </div>
    </div>
    <v-row class="home-container">
      <v-col md="12" cols="12">
        <v-card class="blog-container">
          <div style="text-align:center;margin-bottom: 20px;margin-top: 20px">
            <el-carousel height="300px">
              <el-carousel-item v-for="item in topList" :key="item.id">
                <el-image style="height: 300px" :src="item.smallUrl" @click="toDetails(item.id)"></el-image>
              </el-carousel-item>
            </el-carousel>
          </div>
          <!-- 搜索     -->
          <div class="group">
            <svg class="icon" aria-hidden="true" viewBox="0 0 24 24">
              <g>
                <path
                    d="M21.53 20.47l-3.66-3.66C19.195 15.24 20 13.214 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.215 0 4.24-.804 5.808-2.13l3.66 3.66c.147.146.34.22.53.22s.385-.073.53-.22c.295-.293.295-.767.002-1.06zM3.5 11c0-4.135 3.365-7.5 7.5-7.5s7.5 3.365 7.5 7.5-3.365 7.5-7.5 7.5-7.5-3.365-7.5-7.5z"></path>
              </g>
            </svg>
            <input placeholder="Search" type="search" class="input" v-model="keywords" @keyup.13="listPhotoAlbums">
            <button @click="listPhotoAlbums" style="width: 10em;margin-left: 1em">
              <div class="svg-wrapper-1">
                <div class="svg-wrapper">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                    <path fill="none" d="M0 0h24v24H0z"></path>
                    <path fill="currentColor"
                          d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"></path>
                  </svg>
                </div>
              </div>
              <span>搜索</span>
            </button>
          </div>
          <div style="padding: 20px">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="listPhotoAlbums">
              <el-menu-item index="">全部</el-menu-item>
              <el-menu-item v-for="item of typeList1" :key="item.dictValue" :index=item.dictValue>{{ item.dictLabel }}</el-menu-item>
              <el-submenu index="200">
                <template slot="title">更多...</template>
                <el-menu-item v-for="item of typeList2" :key="item.dictValue" :index="item.dictValue">{{ item.dictLabel }}</el-menu-item>
              </el-submenu>

            </el-menu>
          </div>
          <v-row>
            <v-col :md="3" v-for="item of photoAlbumList" :key="item.id">
              <div class="album-item">
                <v-img class="album-cover" :src="item.smallUrl"/>
                <router-link :to="'/albums/' + item.id" class="album-wrapper">
                  <div class="album-name">{{ item.name }}</div>
                  <div class="album-desc">{{ item.remark }}</div>
                </router-link>
              </div>
            </v-col>
          </v-row>
          <v-pagination
              color="#00C4B6"
              v-model="current"
              :length="Math.ceil(count / 10)"
              total-visible="7"
          />
        </v-card>
      </v-col>
      <!--      <v-col md="2" cols="12" class="d-md-block d-none">
              <div class="blog-wrapper">
                <v-card class="animated zoomIn blog-card mt-5">
                  <div class="author-wrapper">
                    <v-avatar size="110">
                      <img
                          class="author-avatar"
                          src="https://static.talkxj.com/config/643f28683e1c59a80ccfc9cb19735a9c.jpg"
                      />
                    </v-avatar>
                    <div style="font-size: 1.375rem;margin-top:0.625rem">
                      数字挂图
                    </div>
                    <div style="font-size: 0.875rem;">
                      网站简介
                    </div>
                  </div>
                  &lt;!&ndash; 收藏按钮 &ndash;&gt;
                  <a class="collection-btn" @click="tip = true">
                    <v-icon color="#fff" size="18" class="mr-1">mdi-bookmark</v-icon>
                    加入书签
                  </a>
                </v-card>
              </div>
            </v-col>-->
    </v-row>
    <!-- 提示消息 -->
    <v-snackbar v-model="tip" top color="#49b1f5" :timeout="2000">
      按CTRL+D 键将本页加入书签
    </v-snackbar>
  </div>
</template>

<script>
import EasyTyper from "easy-typer-js";

export default {
  created() {
    this.init();
    this.listPhotoAlbums();
    this.getTypeList()
    this.timer = setInterval(this.runTime, 1000);
    if (this.$store.state.username == null || this.$store.state.username == '') {
      this.$store.state.loginFlag = true;
    }
    console.log(this.$store.state)
  },
  watch: {
    current(value) {
      this.listPhotoAlbums(value)
    }
  },
  data: function () {
    return {
      photoAlbumList: [],
      typeList1: [],
      typeList2: [],
      activeIndex: '',
      count: 0,
      tip: false,
      time: "",
      obj: {
        output: "",
        isEnd: false,
        speed: 300,
        singleBack: false,
        sleep: 0,
        type: "rollback",
        backSpeed: 40,
        sentencePause: true
      },
      topList: [],
      current: 1,
      size: 10,
      keywords: null,
    };
  },
  methods: {
    listPhotoAlbums(val) {
      let type = null
      if (val !== undefined && val.length == 1) {
        type = val
      }
      this.axios.get("/api/system/picture/list", {
        params: {
          pageNum: this.current,
          pageSize: this.size,
          name: this.keywords,
          type: type
        }
      }).then(res => {
        this.photoAlbumList = res.data.rows;
        this.count = res.data.total;
        this.photoAlbumList.forEach(i => {
          if (i.isTop === 'Y') {
            this.topList.push(i)
          }
        })
      });
    },
    getTypeList() {
      this.axios.get("/api/system/dict/data/list?dictType=sys_picture_type").then(res => {
        this.typeList1 = res.data.rows.slice(0, 9);
        this.typeList2 = res.data.rows.slice(9);
      });
    },
    // 初始化
    init() {
      document.title = '数字挂图';
      // 一言Api进行打字机循环输出效果
      fetch("https://v1.hitokoto.cn?c=i")
          .then(res => {
            return res.json();
          })
          .then(({hitokoto}) => {
            this.initTyped(hitokoto);
          });
    },
    initTyped(input, fn, hooks) {
      const obj = this.obj;
      // eslint-disable-next-line no-unused-vars
      const typed = new EasyTyper(obj, input, fn, hooks);
    },
    scrollDown() {
      window.scrollTo({
        behavior: "smooth",
        top: document.documentElement.clientHeight
      });
    },
    runTime() {
      var timeold =
          new Date().getTime() -
          new Date('2023-01-01').getTime();
      var msPerDay = 24 * 60 * 60 * 1000;
      var daysold = Math.floor(timeold / msPerDay);
      var str = "";
      var day = new Date();
      str += daysold + "天";
      str += day.getHours() + "时";
      str += day.getMinutes() + "分";
      str += day.getSeconds() + "秒";
      this.time = str;
    },
    toDetails(id) {
      this.$router.push({path: "/albums/" + id});
    }
  },
  computed: {
    isRight() {
      return function (index) {
        if (index % 2 == 0) {
          return "article-cover left-radius";
        }
        return "article-cover right-radius";
      };
    },
    blogInfo() {
      return this.$store.state.blogInfo;
    },
    cover() {
      var cover = "https://file.silencezheng.cn/70dd325f-553a-4d3c-a644-00d2c8e4f9b7.jpg";
      return "background: url(" + cover + ") center center / cover no-repeat";
    }
  }
};
</script>

<style lang="stylus">
.typed-cursor
  opacity: 1
  animation: blink 0.7s infinite

@keyframes blink
  0%
    opacity: 1
  50%
    opacity: 0
  100%
    opacity: 1
</style>

<style scoped>
.home-banner {
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
  height: 100vh;
  background-attachment: fixed;
  text-align: center;
  color: #fff !important;
  animation: header-effect 1s;
}

.banner-container {
  margin-top: 43vh;
  line-height: 1.5;
  color: #eee;
}

.blog-contact a {
  color: #fff !important;
}

.card-info-social {
  line-height: 40px;
  text-align: center;
  margin: 6px 0 -6px;
}

.card-info-social a {
  font-size: 1.5rem;
}

.left-radius {
  border-radius: 8px 0 0 8px !important;
  order: 0;
}

.right-radius {
  border-radius: 0 8px 8px 0 !important;
  order: 1;
}

.article-wrapper {
  font-size: 14px;
}

@media (min-width: 760px) {
  .blog-title {
    font-size: 2.5rem;
  }

  .blog-intro {
    font-size: 1.5rem;
  }

  .blog-contact {
    display: none;
  }

  .home-container {
    max-width: 1800px;
    margin: calc(100vh - 48px) auto 28px auto;
    padding: 0 5px;
  }

  .article-card {
    display: flex;
    align-items: center;
    height: 280px;
    width: 100%;
    margin-top: 20px;
  }

  .article-cover {
    overflow: hidden;
    height: 100%;
    width: 45%;
  }

  .on-hover {
    transition: all 0.6s;
  }

  .article-card:hover .on-hover {
    transform: scale(1.1);
  }

  .article-wrapper {
    padding: 0 2.5rem;
    width: 55%;
  }

  .article-wrapper a {
    font-size: 1.5rem;
    transition: all 0.3s;
  }
}

@media (max-width: 759px) {
  .blog-title {
    font-size: 26px;
  }

  .blog-contact {
    font-size: 1.25rem;
    line-height: 2;
  }

  .home-container {
    width: 100%;
    margin: calc(100vh - 66px) auto 0 auto;
  }

  .article-card {
    margin-top: 1rem;
  }

  .article-cover {
    border-radius: 8px 8px 0 0 !important;
    height: 230px !important;
    width: 100%;
  }

  .article-cover div {
    border-radius: 8px 8px 0 0 !important;
  }

  .article-wrapper {
    padding: 1.25rem 1.25rem 1.875rem;
  }

  .article-wrapper a {
    font-size: 1.25rem;
    transition: all 0.3s;
  }
}

.scroll-down {
  cursor: pointer;
  position: absolute;
  bottom: 0;
  width: 100%;
}

.scroll-down i {
  font-size: 2rem;
}

.article-wrapper a:hover {
  color: #8e8cd8;
}

.article-info {
  font-size: 95%;
  color: #858585;
  line-height: 2;
  margin: 0.375rem 0;
}

.article-info a {
  font-size: 95%;
  color: #858585 !important;
}

.article-content {
  line-height: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.blog-wrapper {
  position: sticky;
  top: 10px;
}

.blog-card {
  line-height: 2;
  padding: 1.25rem 1.5rem;
}

.author-wrapper {
  text-align: center;
}

.blog-info-wrapper {
  display: flex;
  justify-self: center;
  padding: 0.875rem 0;
}

.blog-info-data {
  flex: 1;
  text-align: center;
}

.blog-info-data a {
  text-decoration: none;
}

.collection-btn {
  text-align: center;
  z-index: 1;
  font-size: 14px;
  position: relative;
  display: block;
  background-color: #49b1f5;
  color: #fff !important;
  height: 32px;
  line-height: 32px;
  transition-duration: 1s;
  transition-property: color;
}

.collection-btn:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: #ff7242;
  content: "";
  transition-timing-function: ease-out;
  transition-duration: 0.5s;
  transition-property: transform;
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.collection-btn:hover:before {
  transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66);
  transform: scaleX(1);
}

.author-avatar {
  transition: all 0.5s;
}

.author-avatar:hover {
  transform: rotate(360deg);
}

.web-info {
  padding: 0.25rem;
  font-size: 0.875rem;
}

.scroll-down-effects {
  color: #eee !important;
  text-align: center;
  text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15);
  line-height: 1.5;
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  animation: scroll-down-effect 1.5s infinite;
}

@keyframes scroll-down-effect {
  0% {
    top: 0;
    opacity: 0.4;
    filter: alpha(opacity=40);
  }
  50% {
    top: -16px;
    opacity: 1;
    filter: none;
  }
  100% {
    top: 0;
    opacity: 0.4;
    filter: alpha(opacity=40);
  }
}

.big i {
  color: #f00;
  animation: big 0.8s linear infinite;
}

@keyframes big {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

.album-item {
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: #000;
  border-radius: 0.5rem !important;
}

.album-cover {
  position: relative;
  max-width: none;
  width: calc(100% + 1.25rem);
  height: 250px;
  opacity: 0.8;
  transition: opacity 0.35s, transform 0.35s;
  transform: translate3d(-10px, 0, 0);
  object-fit: cover;
}

.album-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.8rem 2rem;
  color: #fff !important;
}

.album-item:hover .album-cover {
  transform: translate3d(0, 0, 0);
  opacity: 0.4;
}

.album-item:hover .album-name:after {
  transform: translate3d(0, 0, 0);
}

.album-item:hover .album-desc {
  opacity: 1;
  filter: none;
  transform: translate3d(0, 0, 0);
}

.album-name {
  font-weight: bold;
  font-size: 1.25rem;
  overflow: hidden;
  padding: 0.7rem 0;
  position: relative;
}

.album-name:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  content: "";
  transition: transform 0.35s;
  transform: translate3d(-101%, 0, 0);
}

.album-desc {
  margin: 0;
  padding: 0.4rem 0 0;
  line-height: 1.5;
  opacity: 0;
  transition: opacity 0.35s, transform 0.35s;
  transform: translate3d(100%, 0, 0);
}

/* From uiverse.io by @alexruix */
.group {
  display: flex;
  line-height: 28px;
  align-items: center;
  position: relative;
  max-width: 30em;
  margin-bottom: 20px;
}

.input {
  width: 100%;
  height: 40px;
  line-height: 28px;
  padding: 0 1rem;
  padding-left: 2.5rem;
  border: 2px solid transparent;
  border-radius: 8px;
  outline: none;
  background-color: #f3f3f4;
  color: #0d0c22;
  transition: .3s ease;
}

.input::placeholder {
  color: #9e9ea7;
}

.input:focus, input:hover {
  outline: none;
  border-color: rgba(234, 76, 137, 0.4);
  background-color: #fff;
  box-shadow: 0 0 0 4px rgb(234 76 137 / 10%);
}

.icon {
  position: absolute;
  left: 1rem;
  fill: #9e9ea7;
  width: 1rem;
  height: 1rem;
}

/* From uiverse.io by @adamgiebl */
button {
  font-family: inherit;
  font-size: 15px;
  background: royalblue;
  color: white;
  padding: 0.7em 1em;
  padding-left: 0.9em;
  display: flex;
  align-items: center;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.2s;
}

button span {
  display: block;
  margin-left: 0.3em;
  transition: all 0.3s ease-in-out;
}

button svg {
  display: block;
  transform-origin: center center;
  transition: transform 0.3s ease-in-out;
}

button:hover .svg-wrapper {
  animation: fly-1 0.6s ease-in-out infinite alternate;
}

button:hover svg {
  transform: translateX(1.2em) rotate(45deg) scale(1.1);
}

button:hover span {
  transform: translateX(5em);
}

button:active {
  transform: scale(0.95);
}

@keyframes fly-1 {
  from {
    transform: translateY(0.1em);
  }

  to {
    transform: translateY(-0.1em);
  }
}
</style>
